<link rel="stylesheet" href="/css/mediation/index/newDetail.css" />
<!--<link rel="stylesheet" href="/css/common/jquery-ui-themes-1.8.24/themes/base/jquery-ui.css" />-->
<div class="detail_mask"></div>
<div class="new_detail">
  <input type="hidden" value="{$fieldType}" name="fieldType">
  <div class="details_content">
    <div class="operation">
      <span class="prev" data-fn="switch-page" data-type="prev">上一页</span>
      <span class="next" data-fn="switch-page" data-type="next">下一页</span>
      <!-- <span class="minimize" data-fn="switch-page" data-type="minimize">最小化</span> -->
      <span class="closesPage" data-fn="switch-page" data-type="closes">关闭</span>
    </div>
    <div class="details_sub_content">
      <div class="person_msg">
        <div class="name">
          <img src="/images/news/details/Avatar.png" alt="" style="width:30px;height:auto;" />
          <div>
            <p style="font-size: 12px;padding-left: 10px" id="pinyin_user_name"></p>
            <b id="user_name"></b>
          </div>
          <span style="padding-left: 3%;font-size: 12px"><p style="padding: 3px 4px;border-radius:5px" id="case_type"></p></span>
          <span style="padding-left: 2%;font-size: 12px">
            <p id="case_main_info" style="color: #5ca1f8;background-color:#d3e4fd;padding: 2px 2px 1px 10px;border-radius:5px">
            </p></span>
        </div>
        <div class="result">
          <div class="left">
            <p id="result">
              <!-- <img src="/images/news/details/close.png" alt="" />
              <span>无结果</span> -->
            </p>
            <p id="status">
              <!-- <img src="/images/news/details/no.png" alt="" />
              <span>未还款</span> -->
            </p>
          </div>
          <div class="right">
            <p>
              <span>用户标签：</span>
              <select id="user_label" style="width:104px!important;" class="form-control select-mini" data-select="custom-select"  name="customLabel">
                <!-- 动态创建 -->
              </select>
            </p>
            <p>
              <span>用户等级：</span>
              <select id="user_leval" style="width:104px!important;" class="form-control select-mini" data-select="custom-select" name="customGrade">

              </select>
            </p>
          </div>
        </div>
        <div class="other">
          <p>
            <img src="/images/news/details/sex.png" alt="">
            <span id="user_sex"></span>
            <span id="user_age"></span>
          </p>
          <p>
            <img src="/images/news/details/cardid.png" alt="">
            <span id="user_cardId" title=""></span>
          </p>
        </div>
        <div class="other2">
          <p>
            <span>
              <img src="/images/news/details/qiankuan.png" alt="">诉求金额</span>
            <span id="tjbd"></span>
          </p>
        </div>
        <div class="other3">
          <p>
            <span><img src="/images/news/details/yuqi.png" alt="">逾期期数</span>
            <span id="yqts"></span>
          </p>
        </div>
        <div class="icon">
          <!-- <img data-toggle="tooltip" data-placement="top" title="" src="/images/news/details/call.png" alt=""> -->
          <div class="ds-al" data-ele="btn-box" style="margin-right: 50px;position: relative;display:flex;align-items:center;">
              <div data-ele="phone-text-status"></div>
              <div class="callOutTimer" style="margin-left: 5px;font-size: 13px;"></div>
              <img data-fn="hangup" data-type="callOut" data-toggle="tooltip" data-placement="top" title="挂断" src="/images/call/u476.png" style=" width:40px;margin-left: 20px;display: none;cursor: pointer;">
              <!-- <img data-hover="call" data-toggle="tooltip" data-placement="top" title="" src="/images/call/u475.png" style=" width:40px;margin-left: 40px;cursor: pointer;"> -->
              <!-- <ul class="dropdown-menu phone-dropdown">
              </ul> -->
          </div>
        </div>
      </div>
      <div class="detail_msg">
        <div class="left">
          <div class="top">
            <div class="left">
              <div id="call_detail" class="call_detail">
              </div>
            </div>
            <div id="add_telphone" class="right" data-toggle="modal" data-target="#new-phone-dialog" title="添加号码">
              <img style="width:20px;height:auto;" src="/images/news/details/add.png" alt="" />
            </div>
          </div>
          <div id="callInType1" class="bottom" style="">
            <p class="tabs tab_his">
              <span data-type="tab_mediate" class="active">添加调解记录</span>
              <span data-type="tab_replay" class="">添加还款记录</span>
            </p>
            <div class="tab_content">
              <div id="tab_mediate" class="mediate_his" style="overflow-y: scroll;">
                <form class="form_mediate">
                  <input class="form_mediate_caseId" type="hidden" name="caseId" value="">
                  <input type="hidden" name="callId">
                  <input type="hidden" name="type">
                  <div class="remark">

                    <label for="inputEmail3" class="col-sm-3 control-label text-nowrap">本次调解备注：</label>
                    <textarea class="" rows="3" name="desc" id="desctextarea"></textarea>
                  </div>
                  <div class="result">
                      <label style="margin-top:10px;" for="inputEmail3" class="col-sm-3 control-label text-nowrap"><span style="color: red">*</span>本次调解结果：</label>
                      <p>
                        <select id="mediate_result" class="form-control select-mini mediate_result" name="mediateResult">
                        </select>
                        <input name="isSync" type="checkbox" id="dddddd" value="1" style="margin:0 5px;">
                        <label for="dddddd" class="control-label text-nowrap">同步调解结果</label>
                      </p>
                  </div>
                  <div class="result">
                    <label style="margin-top:10px;" for="inputEmail3" class="col-sm-3 control-label text-nowrap"><span style="color: red"></span>调解方式：</label>
                    <p>
                      <select id="mediate_type" class="form-control select-mini mediate_result" name="mediateType">
                        <option value="1">线上调解</option>
                        <option value="2">微信调解</option>
                        <option value="3">线下调解</option>
                        <option value="4">其他</option>

                      </select>
                    </p>
                  </div>
                  <div class="time">
                    <label for="inputEmail3" class="col-sm-3 control-label text-nowrap">计划联系时间：</label>
                    <input type="datetime-local" class="form-control" name="nextTime">
                  </div>
                </form>
              </div>
              <div id="tab_replay" class="repay_his">
                <form class="form_replay">
                  <input class="form_replay_caseId" type="hidden" name="caseId" value="">
                  <div id="first" class="first">
                    <div class="">
                      <p>
                        <input type="text" placeholder="还款总额"  name="returnedMoney">
                      </p>
                      <p>
                        <input type="text" placeholder="还款期数"  name="repaymentPeriods">
                      </p>
                      <p>
                        <select name="returnedDay" title="每月还款日">
                          <option value="0">每月还款日</option>
                          <option value="1">每月1日</option>
                          <option value="2">每月2日</option>
                          <option value="3">每月3日</option>
                          <option value="4">每月4日</option>
                          <option value="5">每月5日</option>
                          <option value="6">每月6日</option>
                          <option value="7">每月7日</option>
                          <option value="8">每月8日</option>
                          <option value="9">每月9日</option>
                          <option value="10">每月10日</option>
                          <option value="11">每月11日</option>
                          <option value="12">每月12日</option>
                          <option value="13">每月13日</option>
                          <option value="14">每月14日</option>
                          <option value="15">每月15日</option>
                          <option value="16">每月16日</option>
                          <option value="17">每月17日</option>
                          <option value="18">每月18日</option>
                          <option value="19">每月19日</option>
                          <option value="20">每月20日</option>
                          <option value="21">每月21日</option>
                          <option value="22">每月22日</option>
                          <option value="23">每月23日</option>
                          <option value="24">每月24日</option>
                          <option value="25">每月25日</option>
                          <option value="26">每月26日</option>
                          <option value="27">每月27日</option>
                          <option value="28">每月28日</option>
                        </select>
                      </p>
                      <p>
                        <input type="text" placeholder="首期还款金额"  name="firstReturnedMoney">
                      </p>
                      <p>
                        <input data-ele="date"  name="firstReturnedDay" class="form-control" placeholder="首期还款时间" autocomplete="off"/>
                        <!-- <input type="date" name="firstReturnedDay" value="首期还款时间" placeholder="首期还款时间"> -->
<!--                        <input id="datepicker" type="text" name="firstReturnedDay" value="首期还款时间" placeholder="首期还款时间">-->
                      </p>
                    </div>

                    <button type="button" name="button" data-fn="add-plan">生成还款计划</button>
                  </div>
                  <div id="plan-box" class="plan-box"></div>
                </form>
              </div>
            </div>
            <div class="buttons">
              <button class="btn btn-primary save" data-fn="save">保存</button>
            </div>
          </div>

          <div id="callInType2" class="bottom" style="display:none;position: relative;justify-content: normal;width:95%;margin:0 auto;">
            <p class="tabs tab_his">
              <span data-type="tab_mediate" class="active">添加投诉记录</span>
            </p>
            <div class="remark" style="display: flex;flex-direction: column;">
              <label for="inputEmail3" class="col-sm-3 control-label text-nowrap" style="margin: 10px 0;">本次投诉内容：</label>
              <textarea id="advanceContent" class="" rows="3" name=""></textarea>
            </div>

            <div class="buttons" style="position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);">
              <button class="btn btn-primary save" data-fn="saveAdvance">保存</button>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="tabs">
            <span class="switch-item active" data-type="msgLog">案件信息</span>
            <span class="switch-item" data-type="mediationLog">调解历史</span>
            <span class="switch-item" data-type="sMSLog">短信记录</span>
            <span class="switch-item" data-type="operateLog">操作日志</span>
            <span class="switch-item" data-type="returnedPlan">还款计划</span>
          </div>
          <div class="list_content">
            <div id="list" class="list msgLog"></div>
            <div id="getMediationLog" class="getMediationLog" style="display:none;position:relative;height:100%;"></div>
            <div id="getSMSLog" class="getSMSLog" style="display:none;position:relative;height:100%;"></div>
            <div id="getOperateLog" class="getOperateLog" style="display:none;position:relative;height:100%;"></div>
            <div id="getReturnedPlan" class="getReturnedPlan" style="display:none;position:relative;height:100%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-content" style="display:none;">
  <div class="dialog_mask"></div>
  <div class="dialog_content">
    <input class="dialog_content_caseId" type="hidden" name="caseId" value="">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="exampleModalLabel">添加电话</h4>
    </div>
    <div class="modal-body">
      <div class="form-group clearfix ui-select">
        <label for="exampleInputName2"  class="col-sm-4 control-label">电话：</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" data-value="new-phone" placeholder="请输入">
        </div>
      </div>
    </div>
    <div class="modal-footer" style="text-align: center;">
      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button type="button" class="btn btn-primary" data-fn="add-phone">确定</button>
    </div>
  </div>
</div>
<script type="text/javascript">
  function initDataModule(that,newJson){
    // https://www.jq22.com/jquery-info23561
    newJson=newJson||{
    };
    let val= that.val();
    let json1 = {
      // format:'YYYY-MM-DD',
      type:that.attr('data-type')||'date',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
      multipleDates:[],//当为多选日期类型时的初始值
      startTime: val,
      // endTime:'2036-04-04',
      // minDate:'2019-04-04',
      maxDate:'',
      separator:' 到 ',
      showType:'modal',
      linkPanels:false,//面板联动
      showClear:true,//是否显示清除按钮
      autoConfirm:true,
      showShortKeys:true,
      autoFillDate:true,//自动变更element里面的值
    };
    let json2={
      ...json1,...newJson
    }
    dataArr.push(new XNDatepicker(that,json2,function(data){
        console.log(data)
    },))
    if(!val){
      that.val('');
    }
  }

  var dataArr=[];
  $('[data-ele="date"]').each(function(index){
    initDataModule($(this));
    $(this).attr('date-sort',index)
  })
  $("#mediate_result").on('change',function(){
    var currentTime = new Date();
    var formattedTime = currentTime.toLocaleString();
    var mediate_result = $('option:selected', this).text();
    $("#desctextarea").val(formattedTime + '【'+mediate_result+'】');
  });


</script>
<script type="text/javascript" src="/js/mediation/mediate/newDetail.js"></script>
